@import '../../style/themes/index.less';

@swiper-action-prefix-cls: ~'@{prefix}-swiper-action';

.@{swiper-action-prefix-cls} {
  position: relative;
  overflow: hidden;
  background-color: #ddd;

  &:not(:first-child):before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 2px;
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    left: 32px;
    z-index: 2;
  }

  &-actions {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;

    &.actions-left {
      left: 0;
    }
    &.actions-right {
      left: 100%;
    }
  }

  &-content {
    touch-action: pan-y;
  }

  &-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: rgb(221, 221, 221);
    color: white;
    font-size: 26px;
    padding: 0 1.1em;
    height: 100%;
  }

  &-btn + &-btn {
    border-left: 2px solid #cecece;
  }
}
